<template>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="loginForm">
      <el-form-item prop="adminName">
        <el-input v-model="ruleForm.adminName" placeholder="请输入用户名" :prefix-icon="User"/>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" show-password :prefix-icon="Lock"/>
      </el-form-item>
      <el-form-item> 
          <el-button type="primary" @click="submitForm(ruleFormRef)" class="submit-btn">登陆</el-button>
      </el-form-item>
      <el-form-item prop="type">
        <el-checkbox v-model="ruleForm.type" name="type" validate-event></el-checkbox>
        <el-divider direction="vertical" border-style="hidden dashed"/>
        <div>我已经同意</div>
        <div class="userContentcss" @click="dialogVisible = true">用户协议</div>
      </el-form-item>
    </el-form>
    <!-- <div style="margin-top: 155px;position: fixed">@ 贵州大学管理系统</div> -->
    <el-dialog v-model="dialogVisible" title="用户协议" width="30%" draggable>
      <span>这里是用户协议内容</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确认</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import router from '@/router'
import axios from '../../axios/axiosInstance'
import store from '../../store/index'

const ruleFormRef = ref()

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (ruleForm.pass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validateName = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('Please input the username'))
  } else {
    callback()
  }
}
const validateType = (rule, value, callback) => {
  console.log("value的值为：")
  console.log(value)
  if (value === '') {
    callback(new Error('请选择'))
  } else {
    callback()
  }
}

const dialogVisible = ref(false)
const ruleForm = reactive({
  adminName: '',
  password: '',
  type: '',
})

const rules = reactive({
  adminName: [{ validator: validateName, trigger: 'blur' ,required: true}],
  password: [{ validator: validatePass, trigger: 'blur' ,required: true}],
  type: [{ validator: validateType, trigger: 'blur' ,required: true}],

})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
      //向后端请求数据

      axios.post('/user/login',ruleForm).then((res) => {   
        console.log(formEl)
        console.log("res是：")
        console.log(res)
        console.log("res.data是：")
        console.log(res.data)
        console.log("res.data.data是：")
        console.log(res.data)
        if(res.code == 200){
          //将数据存在本地
          localStorage.setItem("user_info",res.data);
          localStorage.setItem("token",res.data.token);
          localStorage.setItem("adminName",res.data.adminName);
          localStorage.setItem("id",res.data.adminId);
          store.commit("updateRoleId",res.data.roleId);
          store.commit('updateUserInfo',res.data);
          //显示加载loading页面
         const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })
         setTimeout(() => {
           loading.close()
         }, 2000)
          router.push("/mainFrame")
        }else{
          //登录失败
         ElMessage({type: "error",message: "登录失败"})
        }
    }).catch((err) => {
       //弹窗提示登陆失败
      ElMessage({
        message: '登陆失败',
        type: 'error',
      })
      console.log(err)

    })
      
    } else {
      //弹窗提示登陆失败
      ElMessage({
        message: '登陆失败',
        type: 'error',
      })
      console.log('error submit!')
      return false
    }
  })
}

</script>
<style>
.loginForm{
  width: 25%;
  margin-top: 70px;
  z-index: 999;
   border-radius: 95px;
}
el-input el-input--prefix{
   border-radius: 95px;
}
el-input_wrapper{
  border-radius: 95px;
}

</style>
